<template>
  <div class='myHomeWrapper'>
    <!-- 轮播图 -->
    <div class="block">
      <el-carousel height="462px" class="elCarouselBanner">
        <el-carousel-item v-for="item in bannerList" :key="item.index">
            <div class="imageWrapper" :style="{backgroundImage:`url(${item.bannerUrl})`}">
            </div>
        </el-carousel-item>
      </el-carousel>
    </div>
    <!-- 特点说明 -->
    <div class="featureWrapper">
      <div class="featureMiddle">
        <div class="featureItem" v-for="item in featureList" :key="item.index">
          <div class="featureImage">
            <img :src="item.icon" alt="">
          </div>
          <div class="featureDesc">
            <p class="featureTitle">{{item.title}}</p>
            <p class="featureEnglish">{{item.titleEnglish}}</p>
          </div>
        </div>
      </div>
    </div>
    <!-- 中测明星api -->
    <div class="starWrapper">
      <div class="starMiddle">
        <div class="starTop">
          <p class="starTitle">热门API</p>
          <p class="starEnglish">Hot API</p>
        </div>
        <div class="starCommend">
          <div class="starCommendItem" v-for="item in HotAPIList" :key="item.index" @click="handleInterfaceDesc()">
            <div class="starCommendImage">
              <img :src="item.icon" alt="">
            </div>
            <div class="starCommendTitleAndDesc">
              <p class="starCommendTitle">{{item.name}}</p>
              <p class="starCommendDesc">{{item.des}}</p>
            </div>
            <div class="starPrice">
              ¥&nbsp;<span>{{item.price}}</span>&nbsp;元起
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 推荐API -->
    <div class="commendWrapper">
      <div class="commendMiddle">
        <div class="commendTop">
          <p class="commendTitle">推荐API</p>
          <p class="commendEnglish">Recommend API</p>
        </div>
        <div class="commendCategoryWrapper">
          <!-- 第一行 -->
          <div class="commendCategoryItem" v-for="(item, index) in recommendTypeList" :key="item.index" v-if="index < 3">
            <div class="commendCategoryItemLeft">
              <div class="topIamge" :style="{backgroundImage:`url(${item.iconUrl})`}"></div>
              <div class="bottomText">
                <p class="bottomTitle">{{item.type}}</p>
                <p class="bottomDesc">{{item.des}}</p>
                <p class="bottomBtn">
                  <button class="btn">查看全部</button>
                </p>
              </div>
            </div>
            <div class="commendItemWrapper" @click="handleInterfaceDesc()">
              <div class="commendItem" v-for="element in item.recommendData" :key="element.index">
                <div :style="{backgroundImage:`url(${element.icon})`}" class="commendItemImage">
                </div>
                <div class="starCommendTitleAndDesc">
                  <p class="starCommendTitle">{{element.name}}</p>
                  <p class="starCommendDesc">{{element.des}}</p>
                </div>
                <div class="starPrice">
                  {{element.price}}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- echarts图显调用情况 -->
    <div class="echartsWrapper">
      <div class="echartsMiddle">
        <div class="echartsTop">
          <p class="echartsTitle">API实时调用情况随机抽样</p>
          <p class="echartsEnglish">API real time call</p>
        </div>
        <div class="echartsBottom">
          <div class="echartsContent">
            <div id="myChart"></div>
            <div class="echartsRight">
              <vueSeamless :data='APIIpList' :class-option="option">
                  <p v-for="(item, index) in APIIpList" :key="index">{{item.createAt}}，股票行情接口被IP地址{{item.ipAddress}}调用</p>
              </vueSeamless>
            </div>
          </div>
          <div>
          </div>
        </div>
      </div>
    </div>

    <!-- 她们也在使用 -->
    <div class="userWrapper">
      <div class="userMiddle">
        <div class="userTop">
          <p class="userTitle">他们都在使用我们的API</p>
          <p class="userEnglish">They're using our API</p>
        </div>
        <div class="userImage">
        <vueSeamless :data='userImage' :class-option="optionCustomer">
          <ul class="userImageAllWrapper">
            <li v-for="item in userImage" :key="item.index">
              <img :src="item.img" alt="">
            </li>
          </ul>
         </vueSeamless>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import vueSeamless from 'vue-seamless-scroll'
import star01Image from '@/assets/img/home/star01.png'
import star02Image from '@/assets/img/home/star02.png'
import star03Image from '@/assets/img/home/star03.png'
import star04Image from '@/assets/img/home/star04.png'
import star05Image from '@/assets/img/home/star05.png'
import recommend01Image from '@/assets/img/home/recommend01.png'
import recommend02Image from '@/assets/img/home/recommend02.png'
import recommend03Image from '@/assets/img/home/recommend03.png'

import hezuo01Image from '@/assets/img/user/image_hezuo_1.jpg'
import hezuo02Image from '@/assets/img/user/image_hezuo_2.jpg'
import hezuo03Image from '@/assets/img/user/image_hezuo_3.jpg'
import hezuo04Image from '@/assets/img/user/image_hezuo_4.jpg'
import hezuo05Image from '@/assets/img/user/image_hezuo_5.jpg'
import hezuo06Image from '@/assets/img/user/image_hezuo_6.jpg'
import hezuo07Image from '@/assets/img/user/image_hezuo_7.jpg'
import hezuo08Image from '@/assets/img/user/image_hezuo_8.jpg'
import hezuo09Image from '@/assets/img/user/image_hezuo_9.jpg'
import hezuo10Image from '@/assets/img/user/image_hezuo_10.jpg'

import footer1Img from '@/assets/img/footer/footer1.jpg'
import footer2Img from '@/assets/img/footer/footer2.jpg'
import footer3Img from '@/assets/img/footer/footer3.jpg'
// 引入json
import echartsData from '@/assets/json/echartsmap.json'
import 'echarts/lib/chart/map'
import 'echarts/map/js/china.js'
export default {
  name: 'MyHome',
  data () {
    return {
      option: {
        step: 1,
        limitMoveNum: 9,
        openTouch: false,
        waitTime: 1,
        direction: 1,
        singleHeight: 30
      },
      optionCustomer: {
        step: 1,
        limitMoveNum: 5,
        openTouch: false,
        waitTime: 1,
        direction: 2,
        singleWidth: 30
      },
      APIIpList: [],
      recommendTypeList: [],
      HotAPIList: [],
      bannerList: [],
      user: {},
      echartsData,
      footer1Img,
      footer2Img,
      footer3Img,
      hezuo01Image,
      hezuo02Image,
      hezuo03Image,
      hezuo04Image,
      hezuo05Image,
      hezuo06Image,
      hezuo07Image,
      hezuo08Image,
      hezuo09Image,
      hezuo10Image,
      recommend01Image,
      recommend02Image,
      recommend03Image,
      star01Image,
      star02Image,
      star03Image,
      star04Image,
      star05Image,
      featureList: [],
      userImage: [
        {
          index: 1,
          img: hezuo01Image
        },
        {
          index: 2,
          img: hezuo02Image
        },
        {
          index: 3,
          img: hezuo03Image
        },
        {
          index: 4,
          img: hezuo04Image
        },
        {
          index: 5,
          img: hezuo05Image
        },
        {
          index: 6,
          img: hezuo06Image
        },
        {
          index: 7,
          img: hezuo07Image
        },
        {
          index: 8,
          img: hezuo08Image
        },
        {
          index: 9,
          img: hezuo09Image
        },
        {
          index: 10,
          img: hezuo10Image
        }
      ]
    }
  },
  mounted () {
    this.drawLine()
  },
  components: {
    vueSeamless
  },
  created () {
    document.title = '首页-API商城'
    if (this.$cookieStore.getCookie('userToken') !== '') {
      this.user = this.$localUser.get()
    }
    this.getBannerList()
    this.getFeatureList()
    this.getRecommendList()
    this.getHotAPIList()
    this.getIPList()
  },
  methods: {
    // 获取banner图
    getBannerList () {
      this.$http.get('/v1/bannerInfo/getBannerInfo').then(result => {
        if (result.data.code === 200) {
          this.bannerList = result.data.data
        }
      }).catch(errMsg => {
        this.$message({
          message: '获取bannder接口错误',
          type: 'error'
        })
      })
    },
    // 热门API
    getHotAPIList () {
      this.$http.get('/v1/apiList/getProfileInfoByCount?pageNum=1&pageSize=5&type=0').then(result => {
        if (result.data.code === 200) {
          this.HotAPIList = result.data.data
        }
      }).catch(errMsg => {
        this.$message({
          message: '获取热门API接口错误',
          type: 'error'
        })
      })
    },
    // 推荐API
    getRecommendList () {
      this.$http.get('/v1/apiRecommend/getRecommendInfoWithNode?pageNum=1&pageSize=4').then(result => {
        if (result.data.code === 200) {
          this.recommendTypeList = result.data.data
        }
      }).catch(errMsg => {
        this.$message({
          message: '获取推荐API接口错误',
          type: 'error'
        })
      })
    },
    // 实时调用API
    getIPList () {
      this.$http.get('/v1/apiRequestRecord/getRequestRecord?pageNum=1&pageSize=10').then(result => {
        if (result.data.code === 200) {
          this.APIIpList = result.data.data
        }
      }).catch(errMsg => {
        this.$message({
          message: '获取实时API IP错误',
          type: 'error'
        })
      })
    },
    handleBackTop () {
      window.scrollTo(0, 0)
    },
    // 接口详情页面
    handleInterfaceDesc () {
      this.$router.push('/interfacedesc')
    },
    drawLine () {
      let myChartTemp = this.$echarts.init(document.getElementById('myChart'))
      myChartTemp.setOption({
        backgroundColor: '#404a59',
        title: {
          left: 'center',
          textStyle: {
            color: '#fff'
          }
        },
        legend: {
          show: false,
          orient: 'vertical',
          top: 'bottom',
          left: 'right',
          data: ['地点', '线路'],
          textStyle: {
            color: '#fff'
          }
        },
        geo: {
          map: 'china',
          label: {
            emphasis: {
              show: false
            }
          },
          roam: true,
          itemStyle: {
            normal: {
              areaColor: '#323c48',
              borderColor: '#404a59'
            },
            emphasis: {
              areaColor: '#2a333d'
            }
          }
        },
        series: [{
          name: '地点',
          type: 'effectScatter',
          coordinateSystem: 'geo',
          zlevel: 2,
          rippleEffect: {
            brushType: 'stroke'
          },
          label: {
            emphasis: {
              show: true,
              position: 'right',
              formatter: '{b}'
            }
          },
          symbolSize: 2,
          showEffectOn: 'render',
          itemStyle: {
            normal: {
              color: '#46bee9'
            }
          },
          data: this.echartsData.citys
        }, {
          name: '线路',
          type: 'lines',
          coordinateSystem: 'geo',
          zlevel: 2,
          large: true,
          effect: {
            show: true,
            constantSpeed: 30,
            symbol: 'pin',
            symbolSize: 3,
            trailLength: 0
          },
          lineStyle: {
            normal: {
              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: '#58B3CC'
              }, {
                offset: 1,
                color: '#F58158'
              }], false),
              width: 1,
              opacity: 0.2,
              curveness: 0.1
            }
          },
          data: this.echartsData.moveLines
        }]
      })
    },
    // 获取banner图下面的特征
    getFeatureList () {
      this.$http.get('/v1/apiFeature/getApiFeature').then(result => {
        if (result.data.code === 200) {
          this.featureList = result.data.data
        }
      }).catch(errMsg => {
        this.$message({
          message: '获取特征API接口错误',
          type: 'error'
        })
      })
    }
  }
}
</script>

<style lang='stylus' scoped>
@import '~@/assets/css/variable.styl';
.myHomeWrapper {
  .block {
    margin-top 2px
    .elCarouselBanner {
        .imageWrapper {
            width 100%
            height 100%
            background-repeat: no-repeat;
            background-size: cover;
            background-position 50% 50%
        }
    }
    .el-carousel__item h3 {
      text-align center
      color: #475669;
      font-size: 14px;
      opacity: 0.75;
      line-height: 450px;
      margin: 0;
    }
    .el-carousel__item:nth-child(2n) {
      background-color: #99a9bf;
    }
    .el-carousel__item:nth-child(2n+1) {
      background-color: #d3dce6;
    }
  }
  .featureWrapper {
    .featureMiddle {
      width 1200px
      margin 0 auto
      display flex
      justify-content space-around
      .featureItem {
        text-align center
        padding 40px 0px
        .featureImage {
          margin 0 auto
          img {
            width 95px
            height 95px
            background-repeat: no-repeat;
            background-size: cover;
          }
        }
        .featureDesc {
          margin-top 15px
          .featureTitle {
            font-size  16px
            font-weight bold
          }
          .featureEnglish {
            font-size  14px
            color #999
          }
        }
      }
    }
  }
  .starWrapper {
    background-color white
    .starMiddle {
      width 1200px
      margin 0 auto
      padding-bottom 50px
      .starTop {
        padding 40px 0px
        text-align center
        .starTitle {
          font-size  22px
          font-weight bold
          color $color-theme
        }
        .starEnglish {
          font-size  14px
          color #999
        }
      }
      .starCommend {
        display flex
        justify-content space-around
        .starCommendItem {
          cursor pointer
          text-align center
          width 250px
          border 1px solid $color-background
          padding 20px 20px
          background-color $color-background
          margin-right 10px
          &:last-child {
            margin-right 0px
          }
          .starCommendImage {
            img {
              width 100px
              height 100px
              background-repeat: no-repeat;
              background-size: cover;
            }
            margin 0 auto
          }
          .starCommendTitleAndDesc {
            .starCommendTitle {
              padding-top 20px
              padding-bottom 5px
              text-align center
              font-size  16px
              font-weight bold
            }
            .starCommendDesc {
              color #999;
              font-size 14px
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 1;
              overflow: hidden;
            }
          }
          .starPrice {
            padding 20px 0px
            text-align center
            color #FF8B00
            font-weight bold
            span {
              font-size 22px
            }
          }
          &:hover {
            border-color $color-theme
          }
        }
      }
    }
  }
  .commendWrapper {
    .commendMiddle {
      width 1200px
      margin 0 auto
      padding-bottom 50px
      .commendTop {
        padding 40px 0px
        text-align center
        .commendTitle {
          font-size  22px
          font-weight bold
          color $color-theme
        }
        .commendEnglish {
          font-size  14px
          color #999
        }
      }
      .commendCategoryWrapper {
        .commendCategoryItem {
          margin-bottom 10px
          display flex
          .commendCategoryItemLeft {
            margin-right 10px
            padding-top 20px
            background-color #99C8E6
            width 230px
            .topIamge {
              margin 0 auto
              width 128px
              height 128px
              background-repeat: no-repeat;
              background-size: cover;
            }
            .bottomText {
              padding 30px 0px
              background-color $color-theme
              text-align center
              .bottomTitle {
                font-size 24px
                font-weight bold
                color white
              }
              .bottomDesc {
                color white
                font-size 14px
              }
              .bottomBtn {
                margin-top 10px
                .btn {
                  color: #fff;
                  padding 5px 15px
                  border: solid 1px #E0E0E0;
                  border-radius 3px
                  background-color: $color-theme;
                  &:focus {
                    outline: none
                  }
                }
              }
            }
          }
          .commendItemWrapper {
            display flex
            width 80%
            .commendItem {
              cursor pointer
              text-align center
              width 190px
              border 1px solid #fff
              padding 20px 20px
              background-color #fff
              margin-right 10px
              &:last-child {
                margin-right 0px
              }
              .commendItemImage {
                width 100px
                height 100px
                margin 0 auto
                background-repeat: no-repeat;
                background-size: cover;
              }
              .starCommendTitleAndDesc {
                .starCommendTitle {
                  padding-top 20px
                  padding-bottom 5px
                  text-align center
                  font-size  16px
                  font-weight bold
                }
                .starCommendDesc {
                  color #999;
                  font-size 14px
                  display: -webkit-box;
                  -webkit-box-orient: vertical;
                  -webkit-line-clamp: 1;
                  overflow: hidden;
                }
              }
              .starPrice {
                padding 20px 0px
                text-align center
                color #FF8B00
                font-weight bold
              }
              &:hover {
                border 1px solid #ececec
              }
            }
          }
        }
      }
    }
  }

  .echartsWrapper {
    padding-bottom 50px
    background-color white
    .echartsMiddle {
      width 1200px
      margin 0 auto
      .echartsTop {
        padding 40px 0px
        text-align center
        .echartsTitle {
          font-size  22px
          font-weight bold
          color $color-theme
        }
        .echartsEnglish {
          font-size  14px
          color #999
        }
      }
      .echartsBottom {
        .echartsContent {
          display flex
          #myChart {
            width 50%
          }
          @keyframes rowup {
            0% {
                -webkit-transform: translate3d(0, 0, 0);
                transform: translate3d(0, 0, 0);
            }
            100% {
                -webkit-transform: translate3d(0, -307px, 0);
                transform: translate3d(0, -307px, 0);
                display: none;
            }
          }
          .echartsRight .rowup {
            -webkit-animation: 10s rowup linear infinite normal;
            animation: 10s rowup linear infinite normal;
            position: relative;
          }
          .echartsRight {
            overflow hidden
            height 349px
            margin-left 20px
            width 50%
            color #666666
            padding 20px 20px
            border 1px solid #ECECEC
            p {
              margin-bottom 20px
              // &:last-child {
              //   margin-bottom 0px
              // }
              &:hover {
                color #65ACDA
              }
            }
          }
        }
      }
    }
  }

  .userWrapper {
    background-color white
    .userMiddle {
      width 1200px
      height 400px
      margin 0 auto
      .userTop {
        padding 40px 0px
        text-align center
        .userTitle {
          font-size  22px
          font-weight bold
          color $color-theme
        }
        .userEnglish {
          font-size  14px
          color #999
        }
      }
      .userImage {
        overflow hidden
        .userImageAllWrapper {
          width 1160px
          list-style none
          display flex
          flex-wrap wrap
          &:last-child {
            margin-left -40px
          }
          li {
            margin-right 20px
            margin-bottom 20px
            padding 10px 30px
            border 1px solid #ECECEC
            img {
              display flex
            }
          }
        }
      }
    }
  }
}
</style>
